<!--
=========================================================
* Soft UI Design System - v1.0.9
=========================================================

* Product Page:  https://www.creative-tim.com/product/soft-ui-design-system 
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
* Coded by www.creative-tim.com

 =========================================================

* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. -->
<!DOCTYPE html>
<title>
  {{lang.mfa.front.title}} | Valora | GamerNoTitle
</title>
{% include 'public/head.html' %}
</head>

<body class="index-page">
  {% include 'public/body.html' %}

  {% include 'public/components/announcement.html' %}

  {% include 'public/components/nav.html' %}

  {% include 'public/components/header.html' %}

  <section>
    <div class="container py-4">
      <div class="row">
        <div class="col-lg-7 mx-auto d-flex justify-content-center flex-column">
          <h3 class="text-center">{{lang.mfa.front.title}}</h3>
          <div align="center">
            <p>{{lang.mfa.front.description.line1}}</p>
            <p>{{lang.mfa.front.description.line2}}</p>
          </div>
          <div align="center">
            <p>{{lang.mfa.tip|safe}}</p>
          </div>
          <form role="form" name="login" method="post" autocomplete="off" action="/api/verify">
            <div class="col-md-6 ps-2">
              <label>{{lang.mfa.form.code.title}}</label>
              <div class="input-group">
                <input type="text" class="form-control" id="mfacode" placeholder="{{lang.mfa.form.code.placeholder}}"
                  name="MFACode">
              </div>
            </div>
            <br>
            <div class="row">
              <div class="col-md-12">
                <button type="submit" class="btn bg-gradient-dark w-100" id="confirm"><img
                    src="https://cdn.bili33.top/gh/GamerNoTitle/Valora@master/assets/img/img-navi-valorant-white.svg"
                    disabled>{{lang.mfa.button.confirm}}</button>
              </div>
            </div>
        </div>
        </form>
      </div>
    </div>
    </div>

  </section>
  {% include 'public/footer.html' %}
  <script>
    // 在DOM内容加载完成后执行初始化操作
    document.addEventListener('DOMContentLoaded', function () {
      // 获取输入框和按钮的引用
      const mfaCodeInput = document.getElementById('mfacode');
      const confirmButton = document.getElementById('confirm');

      // 设置按钮初始状态为disabled
      confirmButton.disabled = true;

      // 监听输入框的输入事件
      mfaCodeInput.addEventListener('input', function () {
        // 获取输入框的值
        const mfaCode = mfaCodeInput.value;

        // 使用正则表达式验证输入的内容是否为6位数字
        const isValid = /^\d{6}$/.test(mfaCode);

        // 根据验证结果设置按钮的 disabled 属性
        confirmButton.disabled = !isValid;
      });
    });  
  </script>

</body>